用webpack搭建自己的react脚手架

react-cli

前言：vue有vue-cli,react也有create-react-app。花了点时间自己用webpack实现配置react开发环境

demo地址

一、项目依赖

"dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "react-hot-loader": "^3.1.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^1.1.5",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.3",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "^4.1.1"
  }

二、初始化项目

npm init //会生成一个package.json

三、安装依赖

react: ^16.2.0 react-dom: ^16.2.0 react-router-dom:^4.2.2

npm install react react-dom react-router-dom babel-polyfill --save  // babel-polyfill用来支持es6语法

四、开发过程中的依赖

webpack: ^3.10.0

首先是webpack，其实主要就是webpack配置

npm install webpack --save-dev

先看例子吧

在根目录下新建一个webpack.config.js,如果在命令行直接使用webpack(不指定参数)，默认就是打包这个文件,大致结构如下：

var path = require('path')
module.exports = {
  //入口
  entry:'./src/main.js'
  // 出口
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模块解析
  module: {},
  // 插件
  plugins:[]
}

大致就是这样，这是一个简单的实例将src目录下的main.js作为入口打包进dist目录下的bundle.js,然后在页面引用这个js就可以了

这是个简单的例子，开发过程中我们还需要babel转码,热更新，调试等,打包时成生产环境代码还需要压缩，分离第三方库等功能。

接下来进行项目完善

npm install babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev  //安装react，es6转码过程中需要的依赖

新建一个.babelrc文件

//babel的配置文件
{
    "presets": [
        [
            "es2015", 
            { "modules": false }
        ],
        "react"
    ],
    "plugins": ["react-hot-loader/babel"]
}

新建一个.gitignore文件

// 项目提交仓库是忽略的一些代码
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

新建一个.editorconfig

//规范编码风格
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

然后配置webpack，将开发环境和生产环境分开

先新建一个webpack.base.conf.js基础文件

var path = require('path')
module.exports = {
  // 出口
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-[hash].js'
  },
  // 模块
  module: {
    rules: [{
      test: /(\.js|\.jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    },
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    },
    {
      test: /\.scss$/,
      use: ['style-loader','css-loader','sass-loader']
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader']
    }]
  }
}

出口文件使用name+hash命名这样每次修改代码打包以后名字都会不一样，然后引用需要的loader

npm install css-loader style-loader sass-loader node-loader file-loader react-hot-loader --save-dev

使用test匹配正则加载需要的loader，css预处理器使用的scss(scss可以看做sass的升级),react-hot-loader是热更新中需要用到的

然后新建webpack.dev.conf.js和webpack.prod.conf.js为开发环境打包和生产环境打包，添加使用过程中的依赖

npm install webpack-dev-middleware webpack-hot-middleware webpack-merge clean-webpack-plugin html-webpack-plugin uglifyjs-webpack-plugin express --save-dev

使用webpack-merge继承webpack.base.conf.js中的配置，再单独配置（详细直接看代码）
我们将自己的代码、第三方库、转码用到的babel-polyfill分开打包，这样再根据[name]-[hash].js打包出三个文件

在plugins中加入webpack.optimize.CommonsChunkPlugin()将第三方库配置为公共代码（公共代码加载页面时会先引用）

加入HtmlWebpackPlugin配置，配置项目打包时引用的模板，我们一般在根目录下建议一个index.html的页面

加入UglifyJsPlugin用来压缩代码

加入CleanWebpackPlugin配置，每次打包时先清空

配置HotModuleReplacementPlugin和NoEmitOnErrorsPlugin分别为热更新使用和打包出现错误不会退出

然后dev开发环境比prod生产环境配置的入口文件中多了两行,是为了开发环境中热更新配置的

entry: {
    app: [
 +     'webpack-hot-middleware/client?reload=true', 
 +     'webpack/hot/only-dev-server', 
       './src/main.js'
    ],
    'babel-polyfill': 'babel-polyfill',
    vendors: ['react', 'react-dom', 'react-router-dom']
  }

接下来为开发环境配置本地服务器，webpack有个webpack-dev-server，相当于webpack自己加的服务器,可以自己去研究下，我开始没用起来，还是选择了express

在build文件夹下新建一个dev.server.js文件，然后给开发环境配置服务器,引用webpack-dev-middleware和webpack-hot-middleware配置自动打包和自动刷新页面,具体的在代码中也有相应注释，更多参数配置可以看官方文档

webpack中文文档

然后直接说的在命令行中直接使用webpack打包的是webpack.config.js文件，现在我们改写了，就在package.json中配置一个

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
+    "build": "webpack --config webpack.prod.conf.js",
+    "dev": "node build/dev-server.js"
  }

这样在命令行中使用

npm run build //使用生产环境打包
npm run dev   //启动开发环境调试,当代码发生更改会自动刷新页面

有问题欢迎交流 demo地址